<template>
<div class="list" ref="wrapper">
    <div>
  	<div class="present-area">
      <div class="present-title" ref="present">当前</div>
      <div class="present-button"
       @click="handlepresentClick"
      >{{this.$store.state.city}}</div>
    </div>
    <div class="hot-area">
      <div class="hot-title">热门城市</div>
      <div class="hot-list">
        <div class="hot-button"
         v-for="item of hotCities"
          :key="item.id"
          @click="handleCurrentClick(item.name)">
          {{item.name}}</div>
      </div>
    </div>
    <div class="alph-area">
      <div class="alph-wrapper"
      v-for="(item,key) of cities"
      :key="key"
      :ref="key">
        <div class="alph-title">{{key}}</div>
        <div class="alph-list">
          <div class="alph-button border-bottom"
          v-for="innerItem of item"
          :key="innerItem.id"
          @click="handleAlphClick(innerItem.name)">
          {{innerItem.name}}</div>

        </div>
      </div>
    </div>
</div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import BMap from 'BMap'
export default {
  name: 'locationList',
  props:{
      letter:String,
      cities:Object,
      hotCities:Array
    },
    methods:{
        handleCurrentClick(city){
          this.$store.dispatch('change',city)
          this.$router.push('/')
        },
        handleAlphClick(city){
          this.$store.dispatch('change',city)
          this.$router.push('/')
        },
        handlepresentClick(){
          this.$router.push('/')

        }
        },
   data(){
      return {
        city:''
      }
    },

    watch:{
      letter(){
        // console.log(this.letter)
        const elementLetter = this.$refs[this.letter]
        const elementPresent = this.$refs.present
        if(elementLetter){
          const element = elementLetter[0]
          this.scroll.scrollToElement(element)
        }else{
          this.scroll.scrollToElement(elementPresent)
        }
      }
    },
  mounted(){

    this.scroll = new BScroll(this.$refs.wrapper,{
      click:true,
      mouseWheel:{
        speed:20,
        invert:false,
        easeTime:300
      }
    })
  },

 }
</script>


<style lang="stylus" scoped>
.border-bottom
  &:before
    border:.04rem solid #ccc
.list
  overflow:hidden
  background:#e9ecf1
  position:absolute
  top:1.12rem
  left:0
  bottom:0
  width:100%
  z-index:1
  .hot-list
    overflow:hidden
  .present-title,.hot-title,.alph-title
    margin-left:.4rem
    padding:.4rem 0
  .hot-title
    margin-bottom:-.3rem
  .present-button,.hot-button,.alph-button
    line-height:.44rem
    padding:.2rem .2rem
    background:#fff
  .present-button
    width:84%
    margin-left:.2rem
  .hot-button
    width:15%
    float:left
    margin-left:.2rem
    text-align:center
    margin-top:.2rem
  .alph-button
    width:100%
    padding-left:.4rem
</style>
